<template>
	<div class="">
		<div class="ani-cont" :style="{'height':height+'px'}" v-show="iconArr.length>0">
			<div class="ani-cont-color" :style="{'width':height+'px','height':height+'px','left':aniTop+'px'}"></div>
			<div class="ani-cont-post" :style="{'height':aniHeight+'px'}"></div>
			<div class="ani-cont-detail" :style="{'height':aniHeight+'px'}">
				<div class="screen-item" :style="{'height':aniHeight+'px'}">
					<div v-for="item,index in iconArr" :key="index">
						<template v-if="item==='车辆'">
							<!-- <Icon custom="i-icon icon-cheliangshiti"
				        size="24"
				        title="车辆"
				        class="screen-icon"
				        :class="{green:getTypeVisible('车辆')}"
				        @click.stop="onClickIcon('车辆')" /> -->
							<img :src="moreSetList[0].type?moreSetList[0].imgLight:moreSetList[0].img" class="screen_img cursor-pointer"
								@click.stop="onClickIcon('车辆')">
						</template>
						<template v-if="item==='巡查员'">
							<!-- <Icon custom="i-icon icon-xunchayuan"
				        size="24"
				        title="巡查员"
				        class="screen-icon"
				        :class="{green:getTypeVisible('巡查员')}"
				        @click.stop="onClickIcon('巡查员')" /> -->
							<img :src="moreSetList[1].type?moreSetList[1].imgLight:moreSetList[1].img" class="screen_img cursor-pointer"
								@click.stop="onClickIcon('巡查员')">
						</template>
						<template v-if="item==='人员'">
							<!-- <Icon custom="i-icon icon-huanweigong"
				        size="24"
				        title="人员"
				        class="screen-icon"
				        :class="{green:getTypeVisible('人员')}"
				        @click.stop="onClickIcon('人员')" /> -->
							<img :src="moreSetList[1].type?moreSetList[1].imgLight:moreSetList[1].img" class="screen_img cursor-pointer"
								@click.stop="onClickIcon('人员')">
						</template>
						<template v-if="item==='设施'">
							<!-- <Icon custom="i-icon icon-tucengshezhi_sheshi"
				        size="24"
				        title="设施"
				        class="screen-icon"
				        :class="{green:getTypeVisible('设施')}"
				        @click.stop="onClickIcon('设施')" /> -->
							<img :src="moreSetList[2].type?moreSetList[2].imgLight:moreSetList[2].img" class="screen_img cursor-pointer"
								@click.stop="onClickIcon('设施')">
						</template>
						<template v-if="item==='案件'">
							<!-- <Icon custom="i-icon icon-baojingtixing"
				        size="24"
				        title="案件"
				        class="screen-icon"
				        :class="{green:getTypeVisible('案件')}"
				        @click.stop="onClickIcon('案件')" /> -->
							<img :src="moreSetList[3].type?moreSetList[3].imgLight:moreSetList[3].img" class="screen_img cursor-pointer"
								@click.stop="onClickIcon('案件')">
						</template>
						<template v-if="item==='垃圾桶'">
							<Icon custom="i-icon icon-leixing_lajitong" size="22" title="垃圾桶" class="screen-icon cursor-pointer"
								:class="{green:getTypeVisible('垃圾桶')}" @click.stop="onClickIcon('垃圾桶')" />
						</template>
						<template v-if="item==='收集点'">
							<Icon custom="i-icon icon-biaoshi_shoujidian" size="22" title="收集点" class="screen-icon cursor-pointer"
								:class="{green:getTypeVisible('收集点')}" @click.stop="onClickIcon('收集点')" />
						</template>
						<template v-if="item==='公厕'">
							<Icon custom="i-icon icon-biaoshi_gongce" size="24" title="公厕" class="screen-icon cursor-pointer"
								:class="{green:getTypeVisible('公厕')}" @click.stop="onClickIcon('公厕')" />
						</template>
						<template v-if="item==='中转站'">
							<Icon custom="i-icon icon-biaoshi_zhongzhuanzhan" size="24" title="中转站" class="screen-icon cursor-pointer"
								:class="{green:getTypeVisible('中转站')}" @click.stop="onClickIcon('中转站')" />
						</template>
						<template v-if="item==='园林绿化'">
							<Icon custom="i-icon icon-yuanlinlvdi" size="24" title="园林绿化" class="screen-icon cursor-pointer"
								:class="{green:getTypeVisible('园林绿化')}" @click.stop="onClickIcon('园林绿化')" />
						</template>
						<template v-if="item==='名木古树'">
							<Icon custom="i-icon icon-gushumingmu" size="24" title="名木古树" class="screen-icon cursor-pointer"
								:class="{green:getTypeVisible('名木古树')}" @click.stop="onClickIcon('名木古树')" />
						</template>
						<!-- <template v-if="item==='模式'">
				  <Icon custom="i-icon icon-area"
				        size="24"
				        title="区域模式"
				        class="screen-icon"
				        :class="{green:currentMode===1}"
				        @click.stop="onClickMode(1)" />
				  <Icon custom="i-icon icon-marker"
				        size="24"
				        title="点模式"
				        class="screen-icon"
				        :class="{green:currentMode===2}"
				        @click.stop="onClickMode(2)" />
				</template> -->
						<template v-if="item==='更多'">
							<!-- <Icon custom="i-icon icon-gengduo2"
				        size="24"
				        title="更多设置"
				        class="screen-icon green"
				        @click.stop="onClickMoreSet" /> -->
							<img src="../../../../assets/new/new_screen_5.png" class="screen_img cursor-pointer" @click.stop="onClickMoreSet">
						</template>
					</div>
				</div>
			</div>
		</div>
		<div class="screen-center" @click.stop="onClickCenter"></div>
		<!-- 综合监管中 更多设置 -->
		<Modal v-model="moreSetVisible" :styles="{margin: '0',right: '460px',top:'-144px'}" class-name="more-set"
			width="294" :mask="false" :closable="false" :footer-hide="true" v-click-outside="handlerCloseMoreSet">
			<div class="screen_popule">
				<div class="screen_header" slot="header">
					<div class="screen_name">
						图层控制
					</div>
					<Icon type="md-close" size="20" color="#fff" @click.stop="onClickScreen" class="cursor-pointer" />
				</div>
				<div class="moreSet">
					<div class="moreSet-btn">
						<div class="moreSet-btn-item" v-for="(item,index) in moreSetList" :key="index"
							@click.stop="onClickMoreSetTabsItem(index)"
							:class="{'moreSet-btn-item-in' : currentMoreSetTabsIndex == index}">
							<img :src="currentMoreSetTabsIndex==index?item.imgLight:item.img"
								class="moreSet-btn-item-img">
							{{item.name}}
						</div>
						<img src="../../../../assets/new/new_line.png" class="moreSet-btn-img">
					</div>
					<div class="moreSet-cont">
						<div class="moreSet-cont-title">{{moreSetCheckboxList[currentMoreSetTabsIndex].title}}</div>
						<div class="moreSet-cont-cont">
							<CheckboxGroup v-model="menuTypeMoreArr[currentMoreSetTabsIndex].list"
								@on-change="onChangeMoreSetCheckbox">
								<Checkbox :label="items.name"
									v-for="(items,indexs) in moreSetCheckboxList[currentMoreSetTabsIndex].list"
									:key="items.id">
									<span>{{items.name}}</span>
								</Checkbox>
							</CheckboxGroup>
						</div>
					</div>
					<div class="moreSet-footer">
						<div class="moreSet-footer-btn" @click.stop="onClickScreen">
							取消
						</div>
						<div class="moreSet-footer-btn moreSet-footer-light" @click.stop="onClickScreen">
							确定
						</div>
					</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import vClickOutside from 'v-click-outside'
	export default {
		components: {},
		props: {
			currentTabbarIndex: Number,
			menuTypeArr: Array,
			menuTypeMoreArr: Array,
			index: Number
		},
		directives: {
			clickOutside: vClickOutside.directive
		},
		data() {
			return {
				height:140,
				iconArr: [],
				iconVisibleArr: [],
				currentMode: 1,
				moreSetVisible: false,
				currentMoreSetTabsIndex: 0,
				moreSetList: [{
						name: '车',
						key: '车辆',
						type: true,
						imgLight: require('../../../../assets/new/new_screen_1.png'),
						img: require('../../../../assets/new/new_screen_6.png')
					},
					{
						name: '人',
						key: '人员',
						type: true,
						imgLight: require('../../../../assets/new/new_screen_2.png'),
						img: require('../../../../assets/new/new_screen_7.png')
					},
					{
						name: '物',
						key: '设施',
						type: true,
						imgLight: require('../../../../assets/new/new_screen_3.png'),
						img: require('../../../../assets/new/new_screen_8.png')
					},
					{
						name: '事',
						key: '案件',
						type: true,
						imgLight: require('../../../../assets/new/new_screen_4.png'),
						img: require('../../../../assets/new/new_screen_9.png')
					}
				],
				moreSetCheckboxList: [{
						title: '状态',
						list: [{
								id: 11,
								name: '在线'
							},
							{
								id: 12,
								name: '离线'
							},
							{
								id: 13,
								name: '排班'
							}
						]
					},
					{
						title: '状态',
						list: [{
								id: 21,
								name: '在线'
							},
							{
								id: 22,
								name: '离线'
							},
							{
								id: 23,
								name: '排班'
							}
						]
					},
					{
						title: '状态',
						list: [{
								id: 31,
								name: '公厕'
							},
							{
								id: 32,
								name: '中转站'
							},
							{
								id: 33,
								name: '收集点'
							},
							{
								id: 34,
								name: '园林绿化'
							},
							{
								id: 35,
								name: '名木古树'
							},
							{
								id: 36,
								name: '窨井盖'
							},
							{
								id: 37,
								name: '处理站'
							}
						]
					},
					{
						title: '状态',
						list: [{
								id: 41,
								name: '待分派'
							},
							{
								id: 42,
								name: '待处理'
							},
							{
								id: 43,
								name: '待结案'
							},
						]
					},
				],
				datePickerOpen: false,
				datePickerValue: ''
			};
		},
		watch: {
			currentTabbarIndex(newVal) {
				this.init()
				this.moreSetVisible = false
				if(newVal==0){
					this.height = 140
				}else if(newVal==1||newVal==2){
					this.height = 40
				}else if(newVal==3){
					this.height = 110
				}else if(newVal==4||newVal==5){
					this.height = 90
				}
			},
		},
		computed: {
			...mapGetters({
				'mapCenterLnglat': 'getMapCenterLnglat',
			}),
			aniTop() {
				return -((this.height-32)/2)
			},
			aniHeight(){
				return this.height-2
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.iconArr = this.menuTypeArr[this.currentTabbarIndex]
				this.iconVisibleArr = this.menuTypeArr[this.currentTabbarIndex]
			},
			// 获取图标是否显示
			getTypeVisible(type) {
				return this.iconVisibleArr.some(item => item === type)
			},
			// 点击icon
			onClickIcon(type) {
				let boo = this.getTypeVisible(type)
				this.moreSetList.forEach(item => {
					if (item.key == type) {
						item.type = !boo
						return
					}
				})
				if (boo) {
					this.iconVisibleArr = this.iconVisibleArr.filter(item => item !== type)
				} else {
					this.iconVisibleArr.push(type)
				}
				this.$emit('onChange', this.iconVisibleArr)
			},
			// 点击切换模式
			onClickMode(type) {

			},
			//图层控制关闭
			onClickScreen() {
				this.moreSetVisible = false
			},
			// 点击中心点
			onClickCenter() {
				let lnglat
				if (this.mapCenterLnglat) {
					let mapCenterLnglat = this.mapCenterLnglat.split(',')
					lnglat = {
						lng: mapCenterLnglat[0],
						lat: mapCenterLnglat[1]
					}
				} else {
					lnglat = {
						lng: 119.130974,
						lat: 36.706688
					}
				}
				this.$emit('onClickCenter', lnglat)
			},
			// 点击更多设置icon
			onClickMoreSet() {
				this.moreSetVisible = !this.moreSetVisible
			},
			// 点击更多设置tabs
			onClickMoreSetTabsItem(index) {
				this.currentMoreSetTabsIndex = index
			},
			// 修改更多设置checkbox
			onChangeMoreSetCheckbox(data) {
				this.$emit('onChangeCheckbox')
			},
			onClickDate() {
				this.datePickerOpen = !this.datePickerOpen;
			},
			onChangeDatePicker(date) {
				this.datePickerOpen = false;
				this.datePickerValue = date;
			},
      handlerCloseMoreSet(){
        this.moreSetVisible = false
      },
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/datePicker";

	.screen {
		width: 60px;
		height: 220px;
		background: url(../../../../assets/new/nav2.png) 0 0 no-repeat;
		background-size: 100% 100%;
		position: fixed;
		right: 400px;
		bottom: 110px;
		z-index: 500;
		transition: all 0.2s;
		display: flex;
		align-items: center;
		justify-content: center;

		.screen-item {
			height: 131px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.screen-icon {
				padding: 6px;
				cursor: pointer;
				color: rgba(255, 255, 255, 0.6);

				&.green {
					color: #00BAFF;
				}
			}
		}

		.screen-center {
			width: 40px;
			height: 42px;
			background: url(../../../../assets/new/new_center.png) 0 0 no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 50%;
			bottom: -8px;
			margin-left: -20px;
			cursor: pointer;
		}
	}

	.moreSet {
		display: flex;
		height: 255px;
		position: relative;

		.moreSet-btn {
			width: 78px;
			height: 225px;
			color: #a3a3a4;
			margin-left: 18px;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.moreSet-btn-item {
				font-size: 14px;
				color: #CCCCCC;
				font-weight: bold;
				display: flex;
				align-items: center;
				cursor: pointer;
				margin-top: 30px;

				.moreSet-btn-item-img {
					width: 18px;
					height: 18px;
					margin-right: 10px;
				}
			}

			.moreSet-btn-item-in {
				color: #FFFFFF;
			}

			.moreSet-btn-img {
				width: 220px;
				height: 1px;
				position: absolute;
				top: 110px;
				left: -25px;
				transform: rotate(90deg);
			}
		}

		.moreSet-cont {
			flex: 1;
			padding: 32px 10px 0 30px;

			.moreSet-cont-title {
				font-size: 14px;
				color: #FFFFFF;
				font-weight: 500;
				margin-bottom: 15px;
			}

			.moreSet-cont-cont {
				font-size: 12px;
			}
		}

		.moreSet-footer {
			display: flex;
			align-items: center;
			position: absolute;
			right: 33px;
			bottom: 27px;

			.moreSet-footer-btn {
				width: 50px;
				height: 30px;
				font-size: 12px;
				color: #FFFFFF;
				font-weight: 500;
				opacity: .6;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
			}

			.moreSet-footer-light {
				color: #FFFFFF;
				font-weight: bold;
				background-color: #00BAFF;
				opacity: 1;
				margin-left: 12px;
			}
		}

	}

	.screen_popule {
		/* width: 383px; */
		width: 294px;
		/* height: 373px; */
		height: 325px;
		background: url(../../../../assets/new/new_img_screen.png) 0 0 no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		.screen_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 27px 27px 0 15px;

			.screen_name {
				width: 123px;
				height: 42px;
				line-height: 42px;
				font-size: 14px;
				color: #FFFFFF;
				font-weight: bold;
				background: url(../../../../assets/new/new_light.png) 0 0 no-repeat;
				background-size: 100% 100%;
				padding-left: 32px;
				opacity: .9;
			}
		}
	}

	.screen_1 {
		width: 40px;
		height: 120px;
		background: url(../../../../assets/new/nav3.png) 0 0 no-repeat;
		background-size: 100% 100%;

		.screen-item {
			justify-content: center;
		}
	}

	.screen_2 {
		width: 60px;
		height: 180px;
		background: url(../../../../assets/new/nav4.png) 0 0 no-repeat;
		background-size: 100% 100%;

		.screen-item {
			justify-content: center;
		}
	}

	.screen_3 {
		width: 20px;
		height: 20px;
		background: none;
	}
	
	.ani-cont{
		width: 32px;
		border-radius: 20px;
		background-color: #0d9dff;
		box-shadow: 0px 0px 17px 1px rgba(51, 102, 255, 0.5);
		position: fixed;
		right: 400px;
		bottom: 145px;
		overflow: hidden;
		z-index: 500;
		.ani-cont-color{
			background-color: #0d9dff;
			background-image: conic-gradient(from 0turn at 50% 50%, #0d9dff ,#0d9dff ,#0d9dff ,#0d9dff ,#0d9dff,#0d9dff,#0d9dff,#7dffff,#fff,#7dffff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff ,#0d9dff,#0d9dff,#7dffff,#fff,#7dffff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff,#0d9dff );
			box-sizing: border-box;
			animation:myfirst 3s linear infinite;
			position: absolute;
			top: 0;
		}
		.ani-cont-post{
			width: 30px;
			border-radius: 15px;
			position: absolute;
			left: 1px;
			top: 1px;
			z-index: 9;
			background-color: #eceecb;
		}
		.ani-cont-detail{
			width: 30px;
			border-radius: 15px;
			position: absolute;
			left: 1px;
			top: 1px;
			z-index: 9;
			background: url(../../../../assets/new/new_bgc.png) 0 0 no-repeat;
			background-size: cover;
			.screen_img {
				width: 18px;
				height: 18px;
			}
			.screen-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				padding-top: 5px;
				position: relative;
			
				.screen-icon {
					padding: 6px;
					cursor: pointer;
					color: rgba(255, 255, 255, 0.6);
			
					&.green {
						color: #00BAFF;
					}
				}
			}
		}
	}
	
	.screen-center {
		width: 40px;
		height: 42px;
		background: url(../../../../assets/new/new_center.png) 0 0 no-repeat;
		background-size: 100% 100%;
		position: fixed;
		right: 395px;
		bottom: 100px;
		cursor: pointer;
		z-index: 500;
	}
	
	@keyframes myfirst {
	    0% {
	        transform:rotate(0deg);
	    }
	
	    100% {
	        transform:rotate(360deg);
	    }
	}

	::v-deep {
		.more-set {
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
		}

		.ivu-checkbox-wrapper {
			font-size: 12px;
			color: #FFFFFF;
			font-weight: 500;
			margin-bottom: 15px;
			margin-right: 10px;
		}

		.ivu-modal-content {
			background: rgba(26, 26, 26, 0);
			box-shadow: 0 0 5px 0 rgba(37, 187, 150, 0);

			.ivu-modal-body {
				padding: 0;
				line-height: 1;
			}
		}

		.ivu-checkbox-checked .ivu-checkbox-inner {
			border-color: #00BAFF;
			/*  */
			background-color: #00BAFF;
		}
	}
</style>
